<template>
	<view class="page_scroll_view">
		<tn-navbar fixed :bottom-shadow="false">{{map[type]||'系统'}}客户管理</tn-navbar>
		<tn-sticky class="tn-white_bg">
			<view class="tn-p-sm tn-pb-0">
				<tn-search-box v-model="menberSearch.keyword" @search="getaccountVipList" @clear="getaccountVipList"
					search-button-bg-color="#F8F7F8" placeholder="请输入昵称或手机号" search-button-text-color="#AAAAAA" />
			</view>
			<view v-if="type=='delivery'" @click="showPopup=true" class="tn-flex items-center justify-between tn-p">
				<view class="tn-flex items-center">
					<tn-icon name="edit" />
					<text class="tn-ml-xs">配送商提现费率</text>
				</view>
				<tn-icon class="tn-text-right" type="info" name="right" />
			</view>
			<view style="height: 30rpx;" v-else></view>
			<view class="tn-p-sm tn-pl tn-gray-light_bg">
				<text>共 {{total}} 条记录</text>
			</view>
		</tn-sticky>
		<loading v-if="isLoading" style="height: 70vh;"></loading>
		<view class="empty" style="height: 70vh;" v-else-if="accountVipList.length == 0">
			<image
				src="https://sgymv1.oss-cn-beijing.aliyuncs.com/sgym/avatar/admin/2025/02/a0c4966b-11af-4c87-93aa-359f9c03d89f83ee61eba8e363790692eb5fd8a98de7.png"
				mode="widthFix"></image>
			<text>这里空空荡荡，啥也没有留下</text>
		</view>
		<scroll-view scroll-y="true" v-else>
			<view>
				<view class="tn-p tn-pb-sm border_bottom" v-for="item in accountVipList" :key="item.id"
					@click="goAccountDetailPage(item)">
					<view class="tn-flex items-center justify-between">
						<view class="tn-flex items-center">
							<template v-if="!type">
								<tn-avatar shape="square"
									:url="item.avatar?item.avatar:'https://sgymv1.oss-cn-beijing.aliyuncs.com/sgym/avatar/admin/2024/11/9ccf98d5-b98d-4371-aeda-4cc50314d4e7453ab7651200438c6997a0665aec4063.png'"
									size="xl" />
								<view class="tn-ml-sm tn-flex tn-flex-column tn-text-xs tn-flex-1">
									<text class="tn-mr-xs tn-text-ellipsis-1">用户昵称：{{item.nickname}}</text>
									<text style="margin-top:1rpx">手机号码：{{item.mobile?item.mobile:'暂未绑定手机号'}}</text>
									<text style="margin-top:1rpx">注册日期：{{item.add_time}}</text>
								</view>
							</template>
							<template v-if="type=='seller'">
								<tn-avatar shape="square"
									:url="item.seller_image?item.seller_image:'https://sgymv1.oss-cn-beijing.aliyuncs.com/sgym/avatar/admin/2024/11/9ccf98d5-b98d-4371-aeda-4cc50314d4e7453ab7651200438c6997a0665aec4063.png'"
									size="xl" />
								<view class="tn-ml-sm tn-flex tn-flex-1 tn-flex-column tn-text-xs tn-flex-1">
									<text class="tn-mr-xs tn-text-ellipsis-1">商家名称：{{item.seller_name}}</text>
									<text
										style="margin-top:1rpx">手机号码：{{item.contact_tel?item.contact_tel:'暂未绑定手机号'}}</text>
									<text style="margin-top:1rpx">注册日期：{{item.add_time}}</text>
								</view>
							</template>
							<template v-if="type=='delivery'">
								<tn-avatar shape="square"
									:url="item.delivery_image?item.delivery_image:'https://sgymv1.oss-cn-beijing.aliyuncs.com/sgym/avatar/admin/2024/11/9ccf98d5-b98d-4371-aeda-4cc50314d4e7453ab7651200438c6997a0665aec4063.png'"
									size="xl" />
								<view class="tn-ml-sm tn-flex tn-flex-1 tn-flex-column tn-text-xs tn-flex-1">
									<text class="tn-mr-xs tn-text-ellipsis-1">配送名称：{{item.delivery_name}}</text>
									<text
										style="margin-top:1rpx">手机号码：{{item.contact_tel?item.contact_tel:'暂未绑定手机号'}}</text>
									<text style="margin-top:1rpx">注册日期：{{item.add_time}}</text>
								</view>
							</template>
							<template v-if="type=='sale'">
								<tn-avatar shape="square"
									:url="item.sale_avatar?item.sale_avatar:'https://sgymv1.oss-cn-beijing.aliyuncs.com/sgym/avatar/admin/2024/11/9ccf98d5-b98d-4371-aeda-4cc50314d4e7453ab7651200438c6997a0665aec4063.png'"
									size="xl" />
								<view class="tn-ml-sm tn-flex tn-flex-1 tn-flex-column tn-text-xs tn-flex-1">
									<text class="tn-mr-xs tn-text-ellipsis-1">销售名称：{{item.sale_name}}</text>
									<text
										style="margin-top:1rpx">手机号码：{{item.contact_tel?item.contact_tel:'暂未绑定手机号'}}</text>
									<text style="margin-top:1rpx">注册日期：{{item.add_time}}</text>
								</view>
							</template>
						</view>
						<tn-icon class="tn-text-right" type="info" name="right" />
					</view>
				</view>
				<view class="tn-pt-sm tn-pb-sm tn-flex-center">
					<uni-pagination :total="total" :current="menberSearch.page" :pageSize="menberSearch.limit"
						@change="changePage" />
				</view>
			</view>
		</scroll-view>
	</view>
	<tn-popup v-model="showPopup" open-direction="center" @open="openPopup">
		<view class="tn-p-lg">
			<tn-form :model="formData" ref="formRef" :rules="formRules" label-position="top">
				<tn-form-item label="配送商提现费率（千分比）" prop="delivery_cash_rate">
					<tn-input v-model="formData.delivery_cash_rate" type="digit" placeholder="请输入配送商提现费率（千分比）" />
				</tn-form-item>
			</tn-form>
			<view class="tn-mt tn-flex-center">
				<tn-button size="lg" width="80vw" height="80" font-size="26" @click="submitForReview">提交审核</tn-button>
			</view>
		</view>
	</tn-popup>
	<tn-modal ref="modalRef" />
</template>

<script setup>
	import {
		getaccountVipListApi,
		getAndEditConfigApi
	} from "@/request/worktop/index.js"
	import {
		ref
	} from 'vue';
	import {
		onLoad,
		onShow
	} from "@dcloudio/uni-app"

	onShow(() => {
		getaccountVipList()
	})
	onLoad((e) => {
		type.value = e.app_type
		if (e.app_type == 'delivery') {
			getAndEditConfig()
		}
	})

	const map = {
		'seller': '商家',
		'delivery': '配送',
		'sale': '销售'
	}

	const type = ref('')
	const formRef = ref()
	const modalRef = ref()
	const showPopup = ref(false)
	const isLoading = ref(true)
	const formData = ref({
		delivery_cash_rate: ''
	})
	const menberSearch = ref({
		page: 1,
		limit: 20,
		keyword: '',
		cate_id: '' //商家分类搜索
	})
	const total = ref(0)
	const accountVipList = ref([])

	// 规则
	const formRules = {
		delivery_cash_rate: [{
			required: true,
			message: '请输入配送商提现费率',
			trigger: ['change', 'blur']
		}],
	}

	// 获取会员列表
	const getaccountVipList = () => {
		// isLoading.value = true
		getaccountVipListApi(menberSearch.value, type.value).then(res => {
			if (res.code == 0) {
				total.value = res.other.total
				accountVipList.value = res.data
			}
		}).finally(() => {
			setTimeout(() => {
				isLoading.value = false
			}, 500)
		})
	}
	// 跳转到客户详情页面
	const goAccountDetailPage = (item) => {
		switch (type.value) {
			case 'seller':
				uni.navigateTo({
					url: "/pages_worktop/merchantDetail/merchantDetail?item=" + encodeURIComponent(JSON
						.stringify(
							item))
				})
				break;
			case 'delivery':
				uni.navigateTo({
					url: "/pages_worktop/deliveryDetail/deliveryDetail?item=" + encodeURIComponent(JSON
						.stringify(
							item))
				})
				break;
			case 'sale':
				uni.navigateTo({
					url: "/pages_worktop/saleDetail/saleDetail?item=" + encodeURIComponent(JSON
						.stringify(
							item))
				})
				break;
		}

	}
	// 提交审核
	const submitForReview = () => {
		formRef.value?.validate((valid) => {
			if (valid) {
				getAndEditConfigApi(formData.value.delivery_cash_rate, 'edit').then(res => {
					if (res.code == 0) {
						uni.showToast({
							title: res.message,
							mask: true,
							success() {
								setTimeout(() => {
									getAndEditConfig()
									showPopup.value = false
								}, 800)
							}
						})
					}
				}).catch(err => {
					uni.showToast({
						title: err.message,
						icon: 'none',
					})
				})
			} else {
				uni.showToast({
					title: '请检查必填项',
					icon: 'error',
				})
			}
		})
	}
	// 获取配送商提现费率
	const getAndEditConfig = () => {
		getAndEditConfigApi(formData.value.delivery_cash_rate).then(res => {
			if (res.code == 0) {
				formData.value.delivery_cash_rate = res.data.delivery_cash_rate
			}
		}).catch(err => {
			uni.showToast({
				title: err.message,
				icon: 'none',
			})
		})
	}
	// 更新页码
	const changePage = (e) => {
		menberSearch.value.page = e.current
		getaccountVipList()
	}
	// 打开弹出层
	const openPopup = () => {
		formData.value.delivery_cash_rate = ''
		formRef.value.resetFields()
	}
</script>

<style scoped lang="scss">
</style>